<template>
  <div class="page-share-classic">
    <header-nav></header-nav>
    <div class="container-body">
      <div class="box-body" ref="refContent">
        <div class="container-chat-body">
          <div
            v-for="(item, idx) in list"
            :key="idx"
            :class="[
              'container-chat-item',
              item.messageType == 102 ? 'openai' : '',
              item.messageType == 101 ? 'self' : '',
            ]"
          >
            <div class="box-chat-item">
              <div class="container-chat-item-main">
                <div class="cont-chat-message">
                  <template v-if="item.messageType == 101">{{
                    item.show_mid_table_remark_001
                  }}</template>
                  <template v-if="item.messageType == 102">{{
                    item.show_mid_table_remark_002
                  }}</template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-download" @click="onDownLoad">打开英语一点通APP</div>
  </div>
</template>
<script>
import { download } from "@/utils/openApp.js";
import Base64 from "@/utils/base64";
import HeaderNav from "@/components/header-nav/index";
export default {
  name: "shareabout",
  components: {
    HeaderNav,
  },
  data() {
    return {
      chatSessionId: "",
      industryid: "",
      list: [],
    };
  },
  mounted() {
    this.chatSessionId = this.$route.query.sessionId
      ? decodeURIComponent(this.$route.query.sessionId)
      : "";
    this.industryid = this.$route.query.industryid;
    this.initData();
  },
  methods: {
    handleExpand(idx) {
      let expand = !this.questionList[idx].expand;
      this.questionList[idx].expand = expand;
    },
    // 获取原会话数据
    getOriginList() {
        let _this = this;
      try {
        this.$http
          .post({
            name: "common.collect",
            data: {
              invoke_method: "public_load_middle_table_list",
              pre_db_para_middle_table_name:
                "public_middle_table_lite_mod_ai_chatgpt",
              type_middle_app: 30001,
              type_inner_app: 1001,
              is_online: 0,
              pre_db_para_begin_idx: 0,
              pre_db_para_length_4_list: 50,
              pre_db_para_order_by_para: "id_public_middle_table ASC",
              pre_cmd_para_show_main_info: true,
              mid_table_remark_008_in: this.industryid,
              // mid_table_remark_015_like:翻译,
              mid_table_remark_013_in: this.chatSessionId,
              pre_cmd_para_show_main_info: true,
            },
            loading: {
              enabled: true,
            },
          })
          .then(
            ({ result, response }) => {
              let tmpResult = result?.page_content || [];
              let showResultList = [];
              try {
                tmpResult.forEach((item) => {
                  item.show_mid_table_remark_001 = item.mid_table_remark_001;
                  item.show_mid_table_remark_002 = item.mid_table_remark_002;
                  // val.replace(/<br\s*\/?>/g, "\n")
                  item.show_mid_table_remark_001 = Base64.decode(
                    item.show_mid_table_remark_001
                  ).replace(/<br\s*\/?>/g, "\n");
                  //   showBRContent(
                  //   showDecodeBase64(item.show_mid_table_remark_001)
                  // );
                  // item.show_mid_table_remark_002 = showBRContent(
                  //   showDecodeBase64(item.show_mid_table_remark_002)
                  // );
                  item.show_mid_table_remark_002 = Base64.decode(
                    item.show_mid_table_remark_002
                  ).replace(/<br\s*\/?>/g, "\n");
                  item.show_save_data_003 =
                    (item?.save_data_003 || [])[0] || null;
                  item.show_save_data_004 =
                    (item?.save_data_004 || [])[0] || null;
                  showResultList.push(
                    Object.assign(
                      {
                        messageType: 101,
                      },
                      item
                    )
                  );
                  showResultList.push(
                    Object.assign(
                      {
                        messageType: 102,
                      },
                      item
                    )
                  );
                });
              } catch (e) {
                //TODO handle the exception
                console.log(e);
              }

              let tmpList = this.list;
              tmpList = showResultList.concat(tmpList);
              this.list = tmpList;
             

              this.$nextTick(() => {
                let scrollEl = _this.$refs.refContent;
                scrollEl.scrollTo({
                  top: scrollEl.scrollHeight,
                  behavior: "smooth",
                });
              });
              _this.showContent();
            },
            (err) => {
              console.log(err, ">>>>");
              this.list = [];
              _this.showContent();
            }
          );
      } catch (error) {
        console.log("err,??", error);
        this.list = [];
      }
    },
    // 获取门店信息
    initData() {
      this.$http
        .post({
          name: "login",
          data: {
            invoke_method: "login_by_password",
            user_phone: "x-teamer",
            password_user: "123456",
            pre_cmd_para_need_pic_code: false,
            pre_cmd_para_show_user_tree: true,
          },
          loading: {
            enabled: true,
          },
        })
        .then(({ result, response }) => {
          //   console.log(result, response, ">>>>>");
          //   Object.assign(this.agentInfo, result.public_agent_info);
          this.getOriginList();
          
          return;
        })
        .catch(({ msg }) => {
          this.showMessage(msg);
        });
    },
    onDownLoad() {
      let url = download();
      if (!url) {
        this.$$message({
          content: "请用默认浏览器打开该链接",
          sure(node, close) {
            resolve({
              node,
              close,
            });
          },
        });
      } else {
        window.location.href = url;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.page-share-classic {
  position: relative;
  width: 100%;
  height: 100vh;
  padding-bottom: 1.813rem;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  background: #182836;
  box-sizing: border-box;
  overflow: hidden;

  .container-body {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;

    .box-body {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;

      .container-chat-body {
        position: relative;
        width: 100%;
        padding-left: 0.853rem;
        padding-right: 0.853rem;
        padding-top: 0.48rem;
        box-sizing: border-box;

        .container-chat-item {
          position: relative;
          width: 100%;
          margin-bottom: 1.066rem;

          .box-chat-item {
            position: relative;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;

            .container-chat-item-main {
              position: relative;
              flex: auto;
              width: 0;
              display: flex;
              display: -webkit-flex;
              flex-direction: row;

              .cont-chat-message {
                position: relative;
                max-width: 100%;
                padding: 0.8rem;
                box-sizing: border-box;
                font-size: 0.8rem;
                // font-family: PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 1.28rem;
                text-align: justify;
                white-space: pre-wrap;
              }
            }
          }

          .box-chat-operation {
            position: relative;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            align-items: center;

            &.my {
              margin-top: 0.64rem;
            }

            &.openai {
              margin-top: 0.533rem;
            }

            .box-edit {
              position: relative;
              display: flex;
              display: -webkit-flex;
              flex-direction: row;
              align-items: center;

              font-size: 0.746rem;
              // font-family: PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 0.746rem;

              .icon-edit {
                position: relative;
                width: 0.693rem;
                height: 0.693rem;
                margin-right: 10rpx;
              }
            }

            .box-icon-operation {
              position: relative;
              width: 50rpx;
              height: 50rpx;
              background: #2d4052;
              border-radius: 50%;
              box-sizing: border-box;
              margin-right: 0.746rem;

              &.activated {
                background: #48c282;
              }

              &:last-child {
                margin-right: 0;
              }

              .icon-img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                width: 0.8rem;
                height: 0.8rem;
              }
            }
          }

          &.self {
            .box-chat-item .container-chat-item-main {
              justify-content: flex-end;
            }

            .box-chat-item .container-chat-item-main .cont-chat-message {
              background: rgba(0, 255, 246, 1);
              color: rgba(24, 40, 54, 1);
              border-radius: 1.173rem 0.106rem 1.173rem 1.173rem;
            }

            .box-chat-operation {
              justify-content: flex-end;
            }
          }

          &.openai {
            .box-chat-item .container-chat-item-main .cont-chat-message {
              background: #2d4052;
              border-radius: 0.106rem 0.853rem 0.853rem 0.853rem;
            }
          }
        }
      }
    }
  }

  .btn-download {
    position: relative;
    width: 10.666rem;
    height: 2.346rem;
    font-size: 0.853rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(24, 40, 54, 1);
    line-height: 2.346rem;
    background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
    box-shadow: 0px 0.293rem 0.933rem 0px rgba(13, 23, 32, 0.6);
    border-radius: 1.173rem;
    margin: 1.28rem auto 0;
    text-align: center;
  }
}
</style>
